<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1, .box2{width:100px;height:100px;position: absolute;left:0;top:0;background: red;}
    
    .box2{top:110px;background: green;}
  </style>
</head>
<body>

  <div class="box1"></div>
  <div class="box2"></div>
  
</body>
<script>

  function Drag(ele){
    this.ele = ele;

    this.addEvent();
  }
  Drag.prototype.addEvent = function(){
    const that = this;
    this.ele.onmousedown = function(eve){
      that.downE = eve || window.event;
      document.onmousemove = function(eve){
        that.moveE = eve || window.event;
        that.move();
      }
      document.onmouseup = function(){
        that.up();
      }
    }
  }
  Drag.prototype.move = function(){
    let l = this.moveE.pageX - this.downE.offsetX;
    let t = this.moveE.pageY - this.downE.offsetY;

    this.ele.style.left = l + "px";
    this.ele.style.top = t + "px";
  }
  Drag.prototype.up = function(){
    document.onmousemove = null;
    document.onmouseup = null;
  }

  function Drag2(ele){
    Drag.call(this, ele)
  }
  Drag2.prototype = {
    ...Drag.prototype,
    move(){
      let l = this.moveE.pageX - this.downE.offsetX;
      let t = this.moveE.pageY - this.downE.offsetY;

      if(l<0) l=0;
      if(t<0) t=0;

      this.ele.style.left = l + "px";
      this.ele.style.top = t + "px";
    }
  }

  new Drag( document.querySelector(".box1") );

  new Drag2( document.querySelector(".box2") );
  
  
</script>
</html>